<template>
  <el-row
    v-if="linkJump"
    v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
    style="height: 430px"
  >
    <el-row>
      <span style="font-weight:600;margin-right: 20px">{{ $t('panel.jump_set') }}</span>
      <el-checkbox v-model="linkJump.checked">{{ $t('panel.enable_jump') }}</el-checkbox>
    </el-row>
    <el-row v-loading="loading">
      <el-row class="preview">
        <el-col
          :span="8"
          style="height:100%;overflow-y: auto"
        >
          <el-row class="tree-head">
            <span style="float: left;margin-left: 30px">{{ $t('panel.column_name') }}</span>
            <span style="float: right;margin-right: 10px">{{ $t('panel.enable_column') }}</span>
          </el-row>
          <el-tree
            ref="linkJumpInfoTree"
            :data="linkJumpInfoXArray"
            node-key="sourceFieldId"
            highlight-current
            :props="treeProp"
            @node-click="nodeClick"
          >
            <span
              slot-scope="{ data }"
              class="custom-tree-node"
            >
              <span>
                <span style="margin-left: 6px">{{ data.sourceFieldName }}</span>
              </span>
              <span @click.stop>
                <div>
                  <span class="auth-span">
                    <el-checkbox
                      v-model="data.checked"
                      @change="sourceFieldCheckedChange(data)"
                    />
                  </span>
                </div>
              </span>
            </span>
          </el-tree>
        </el-col>
        <el-col
          :span="16"
          class="preview-show"
        >
          <el-row v-if="linkJumpInfo">
            <el-row style="margin-top: 10px;height: 30px;">
              <el-col
                :span="4"
                style="margin-left: 20px"
              >
                {{ $t('panel.link_type') }}：
              </el-col>
              <el-col :span="10">
                <el-radio-group
                  v-model="linkJumpInfo.linkType"
                  size="mini"
                >
                  <el-radio label="outer">{{ $t('panel.link_outer') }}</el-radio>
                  <el-radio label="inner">{{ $t('panel.link_panel') }}</el-radio>
                </el-radio-group>
              </el-col>
              <el-col
                v-if="linkJumpInfo.linkType==='inner'"
                :span="9"
              >
                <treeselect
                  v-model="linkJumpInfo.targetPanelId"
                  :options="panelList"
                  :disable-branch-nodes="true"
                  :normalizer="normalizer"
                  :placeholder="$t('panel.select_jump_panel')"
                  :no-children-text="$t('commons.treeselect.no_children_text')"
                  :no-options-text="$t('commons.treeselect.no_options_text')"
                  :no-results-text="$t('commons.treeselect.no_results_text')"
                  style="margin-right: 10px"
                  @select="panelNodeClick"
                  @input="inputVal"
                >
                  <label
                    slot="option-label"
                    slot-scope="{ node, labelClassName }"
                    :class="labelClassName"
                    :title="node.label"
                  >
                    {{ node.label }}
                  </label>
                </treeselect>
              </el-col>
            </el-row>
            <el-row style="margin-top: 10px;height: 30px">
              <el-col
                :span="4"
                style="margin-left: 20px"
              >
                {{ $t('panel.open_model') }}：
              </el-col>
              <el-col :span="10">
                <el-radio-group
                  v-model="linkJumpInfo.jumpType"
                  size="mini"
                >
                  <el-radio label="_self">{{ $t('panel.now_window') }}</el-radio>
                  <el-radio label="_blank">{{ $t('panel.new_window') }}</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
            <el-row
              v-if="linkJumpInfo.linkType==='inner'"
              style="margin-top: 5px;"
              class="top_border"
            >
              <el-row style="margin-top: 10px">
                <el-col :span="11">
                  <div class="ellip">{{ $t('panel.link_component') }}</div>
                </el-col>
                <el-col :span="11">
                  <div class="ellip">{{ $t('panel.link_component_field') }}</div>
                </el-col>
              </el-row>
              <el-row style="height: 180px;overflow-y: auto">
                <el-row
                  v-for="(targetViewInfo,index) in linkJumpInfo.targetViewInfoList"
                  :key="index"
                >
                  <el-col :span="11">
                    <div class="select-filed">
                      <el-select
                        v-model="targetViewInfo.targetViewId"
                        filterable
                        style="width: 100%"
                        size="mini"
                        :placeholder="$t('fu.search_bar.please_select')"
                        @change="viewInfoOnChange(targetViewInfo)"
                      >
                        <el-option
                          v-for="item in currentLinkPanelViewArray"
                          v-show="checkShow(item)"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        >
                          <span
                            v-if="item.isPlugin"
                            style="float: left"
                          >
                            <svg-icon
                              :icon-class="item.type !== 'buddle-map' ? ('/api/pluginCommon/staticInfo/' + item.type + '/svg') : item.type"
                              style="width: 14px;height: 14px"
                            />
                          </span>
                          <span
                            v-else
                            style="float: left"
                          >
                            <svg-icon
                              :icon-class="item.type"
                              style="width: 14px;height: 14px"
                            />
                          </span>
                          <span style="float: left; font-size: 12px">{{ item.name }}</span>
                        </el-option>
                      </el-select>
                    </div>
                  </el-col>
                  <el-col :span="11">
                    <div class="select-filed">
                      <el-select
                        v-model="targetViewInfo.targetFieldId"
                        :disabled="targetViewInfo.targetFieldId === 'empty'"
                        filterable
                        style="width: 100%"
                        size="mini"
                        :placeholder="$t('fu.search_bar.please_select')"
                      >
                        <el-option
                          v-for="viewField in viewIdFieldArrayMap[targetViewInfo.targetViewId]"
                          :key="viewField.id"
                          :label="viewField.name"
                          :value="viewField.id"
                        >
                          <span style="float: left">
                            <svg-icon
                              v-if="viewField.deType === 0"
                              icon-class="field_text"
                              class="field-icon-text"
                            />
                            <svg-icon
                              v-if="viewField.deType === 1"
                              icon-class="field_time"
                              class="field-icon-time"
                            />
                            <svg-icon
                              v-if="viewField.deType === 2 || viewField.deType === 3"
                              icon-class="field_value"
                              class="field-icon-value"
                            />
                            <svg-icon
                              v-if="viewField.deType === 5"
                              icon-class="field_location"
                              class="field-icon-location"
                            />
                          </span>
                          <span style="float: left;font-size: 12px">{{ viewField.name }}</span>
                        </el-option>
                      </el-select>
                    </div>
                  </el-col>
                  <el-col :span="2">
                    <div>
                      <el-button
                        icon="el-icon-delete"
                        type="text"
                        size="small"
                        style="float: left"
                        @click="deleteLinkJumpField(index)"
                      />
                    </div>
                  </el-col>
                </el-row>
              </el-row>

              <el-row class="bottom">
                <el-button
                  :disabled="!linkJumpInfo.targetPanelId"
                  size="mini"
                  type="success"
                  icon="el-icon-plus"
                  round
                  @click="addLinkJumpField"
                >{{ $t('panel.add_jump_field') }}
                </el-button>
              </el-row>
              <i
                slot="reference"
                class="icon iconfont icon-edit slot-class"
              />
            </el-row>
            <el-row
              v-if="linkJumpInfo.linkType==='outer'"
              style="border-top: 1px solid #E6E6E6;padding:14px"
            >
              <el-row style="height: 230px;border: 1px solid #E6E6E6">
                <el-col
                  :span="18"
                  style="height: 100%"
                >
                  <el-row>
                    <span>
                      {{ $t('panel.target_url') }}
                      <el-tooltip
                        class="item"
                        effect="dark"
                        placement="bottom"
                      >
                        <div slot="content">
                          {{ $t('panel.target_url_tips') }}
                        </div>
                        <i
                          class="el-icon-info"
                          style="cursor: pointer;"
                        />
                      </el-tooltip>
                    </span>
                    <codemirror
                      v-show="codemirrorShow"
                      ref="myCm"
                      v-model="linkJumpInfo.content"
                      class="codemirror"
                      :options="cmOption"
                      @ready="onCmReady"
                      @focus="onCmFocus"
                      @input="onCmCodeChange"
                    />
                  </el-row>
                </el-col>
                <el-col
                  :span="6"
                  style="height: 100%;border-left: 1px solid #E6E6E6;"
                >
                  <el-col
                    :span="24"
                    style="height: 100%"
                    class="padding-lr"
                  >
                    <span>
                      {{ $t('panel.select_world') }}
                      <el-tooltip
                        class="item"
                        effect="dark"
                        placement="bottom"
                      >
                        <div
                          slot="content"
                          v-html="$t('chart.reference_field_tip')"
                        />
                        <i
                          class="el-icon-info"
                          style="cursor: pointer;"
                        />
                      </el-tooltip>
                    </span>
                    <el-input
                      v-model="searchField"
                      size="mini"
                      :placeholder="$t('dataset.search')"
                      prefix-icon="el-icon-search"
                      clearable
                    />
                    <div class="field-height">
                      <el-divider />
                      <draggable
                        v-model="linkJumpInfoArray"
                        :options="{group:{name: 'drag',pull:'clone'},sort: true}"
                        animation="300"
                        class="drag-list"
                        :disabled="true"
                      >
                        <transition-group>
                          <span
                            v-for="item in linkJumpInfoArray"
                            :key="item.sourceFieldId"
                            class="item-dimension"
                            :title="item.sourceFieldName"
                            @click="insertFieldToCodeMirror('['+item.sourceFieldName+']')"
                          >
                            <svg-icon
                              v-if="item.deExtractType === 0"
                              icon-class="field_text"
                              class="field-icon-text"
                            />
                            <svg-icon
                              v-if="item.deExtractType === 1"
                              icon-class="field_time"
                              class="field-icon-time"
                            />
                            <svg-icon
                              v-if="item.deExtractType === 2 || item.deExtractType === 3"
                              icon-class="field_value"
                              class="field-icon-value"
                            />
                            <svg-icon
                              v-if="item.deExtractType === 5"
                              icon-class="field_location"
                              class="field-icon-location"
                            />
                            {{ item.sourceFieldName }}
                          </span>
                        </transition-group>
                      </draggable>
                    </div>
                  </el-col>
                </el-col>
              </el-row>
            </el-row>
          </el-row>
          <el-row
            v-else
            style="height: 100%; background-color: var(--MainContentBG);"
            class="custom-position"
          >
            {{ $t('panel.select_dimension') }}
          </el-row>
        </el-col>
      </el-row>
    </el-row>
    <el-row class="root-class">
      <el-button
        size="mini"
        @click="cancel()"
      >{{ $t('commons.cancel') }}
      </el-button>
      <el-button
        type="primary"
        size="mini"
        @click="save()"
      >{{ $t('commons.confirm') }}
      </el-button>
    </el-row>
  </el-row>
</template>

<script>
import { queryPanelJumpInfo, queryWithViewId, updateJumpSet } from '@/api/panel/linkJump'
import { groupTree } from '@/api/panel/panel'
import { getComponentInfo } from '@/api/panel/panelView'
import { mapState } from 'vuex'

import draggable from 'vuedraggable'
import { codemirror } from 'vue-codemirror'
// 核心样式
import 'codemirror/lib/codemirror.css'
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/solarized.css'
import 'codemirror/mode/sql/sql.js'
// require active-line.js
import 'codemirror/addon/selection/active-line.js'
// closebrackets
import 'codemirror/addon/edit/closebrackets.js'
// keyMap
import 'codemirror/mode/clike/clike.js'
import 'codemirror/addon/edit/matchbrackets.js'
import 'codemirror/addon/comment/comment.js'
import 'codemirror/addon/dialog/dialog.js'
import 'codemirror/addon/dialog/dialog.css'
import 'codemirror/addon/search/searchcursor.js'
import 'codemirror/addon/search/search.js'
import 'codemirror/keymap/emacs.js'
// 引入代码自动提示插件
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/sql-hint'
import 'codemirror/addon/hint/show-hint'
import { imgUrlTrans } from '@/components/canvas/utils/utils'

export default {
  name: 'LinkJumpSet',
  components: { codemirror, draggable },
  props: {
    viewId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      codemirrorShow: true,
      name2Auto: [],
      searchField: '',
      searchFunction: '',
      loading: false,
      inputType: 'self',
      fieldName: 'name',
      tableRadio: null,
      keyWordSearch: '',
      columnLabel: this.$t('panel.belong_to_category'),
      templateList: [],
      importTemplateInfo: {
        snapshot: ''
      },
      sourceViewFields: [],
      treeProp: {
        id: 'sourceFieldId',
        label: 'sourceFieldName',
        children: 'children'
      },
      linkJump: null,
      linkJumpInfoArray: [],
      linkJumpInfoXArray: [],
      mapJumpInfoArray: {},
      panelList: [],
      linkJumpInfo: null,
      currentFiledTreeNode: null,
      defaultLinkJumpInfo: {
        linkType: 'inner',
        jumpType: '_self',
        targetViewInfoList: []
      },
      defaultTargetViewInfo: {
        targetViewId: null,
        targetFieldId: null
      },
      currentLinkPanelViewArray: [],
      viewIdFieldArrayMap: {},
      cmOption: {
        tabSize: 2,
        styleActiveLine: true,
        lineNumbers: true,
        line: true,
        mode: 'text/x-textile',
        theme: 'solarized',
        hintOptions: { // 自定义提示选项
          completeSingle: false // 当匹配只有一项的时候是否自动补全
        }
      },
      widgetSubjectsFilter: ['timeYearWidget', 'timeMonthWidget', 'timeDateWidget', 'textSelectWidget', 'textSelectGridWidget', 'textInputWidget', 'textSelectTreeWidget', 'numberSelectWidget', 'numberSelectGridWidget'],
      widgetSubjectsTrans: {
        timeYearWidget: '年份过滤组件',
        timeMonthWidget: '年月过滤组件',
        timeDateWidget: '日期过滤组件',
        timeDateRangeWidget: '日期范围过滤组件',
        textSelectWidget: '文本下拉过滤组件',
        textSelectGridWidget: '文本列表过滤组件',
        textInputWidget: '文本搜索过滤组件',
        textSelectTreeWidget: '下拉树过滤组件',
        numberSelectWidget: '数字下拉过滤组件',
        numberSelectGridWidget: '数字列表过滤组件',
        numberRangeWidget: '数值区间过滤组件'
      }
    }
  },
  computed: {
    classBackground() {
      if (this.importTemplateInfo.snapshot) {
        return {
          background: `url(${imgUrlTrans(this.importTemplateInfo.snapshot)}) no-repeat`
        }
      } else {
        return {}
      }
    },
    panelInfo() {
      return this.$store.state.panel.panelInfo
    },
    codemirror() {
      return this.$refs.myCm.codemirror
    },
    ...mapState([
      'componentData',
      'canvasStyleData',
      'panelViewDetailsInfo'
    ])
  },
  watch: {},
  created() {
  },
  mounted() {
    this.init()
  },
  destroyed() {
  },
  methods: {
    init() {
      const chartDetails = JSON.parse(this.panelViewDetailsInfo[this.viewId])
      let checkAllAxisStr = chartDetails.xaxis + chartDetails.xaxisExt + chartDetails.yaxis + chartDetails.yaxisExt + chartDetails.drillFields
      let checkJumpStr
      // 堆叠图的可选参数分两种情况 1.如果有堆叠项 则指标只有第一个可选 2.如果没有堆叠项泽所有指标都可以选
      if (chartDetails.type.indexOf('stack') > -1 && chartDetails.extStack.length > 2) {
        const yaxisArray = JSON.parse(chartDetails.yaxis)
        const yaxisNew = yaxisArray.length > 0 ? JSON.stringify(yaxisArray[0]) : '[]'
        checkAllAxisStr = chartDetails.xaxis + chartDetails.xaxisExt + yaxisNew + chartDetails.yaxisExt + chartDetails.drillFields
        checkJumpStr = checkAllAxisStr
      } else if (chartDetails.type === 'table-pivot') {
        checkJumpStr = checkAllAxisStr
      } else if (chartDetails.type === 'table-info') {
        checkJumpStr = chartDetails.xaxis + chartDetails.drillFields
      } else if (chartDetails.render === 'antv' && chartDetails.type === 'scatter') {
        checkJumpStr = checkAllAxisStr
        const xAxis = JSON.parse(chartDetails.xaxis)
        if (xAxis && xAxis[0] && xAxis[0].groupType === 'q') {
          checkJumpStr = checkJumpStr + chartDetails.extStack
        }
      } else if (chartDetails.type === 'bar-time-range') {
        checkAllAxisStr = chartDetails.xaxis + chartDetails.drillFields
        checkJumpStr = checkAllAxisStr
      } else {
        checkJumpStr = checkAllAxisStr
      }
      // 获取可关联的仪表板
      groupTree({}).then(rsp => {
        this.panelList = rsp.data
      })
      // 获取当前视图的关联信息
      queryWithViewId(this.panelInfo.id, this.viewId).then(rsp => {
        this.linkJump = rsp.data
        this.linkJumpInfoArray = []
        this.linkJumpInfoXArray = []
        this.linkJump.linkJumpInfoArray.forEach(linkJumpInfo => {
          if (checkJumpStr.indexOf(linkJumpInfo.sourceFieldId) > -1) {
            this.mapJumpInfoArray[linkJumpInfo.sourceFieldId] = linkJumpInfo
            this.linkJumpInfoArray.push(linkJumpInfo)
            this.linkJumpInfoXArray.push(linkJumpInfo)
          } else if (checkAllAxisStr.indexOf(linkJumpInfo.sourceFieldId) > -1) {
            this.linkJumpInfoArray.push(linkJumpInfo)
          }
        })
        this.linkJumpInfoArray.forEach(linkJumpInfo => {
          linkJumpInfo.content = this.setNameIdTrans('sourceFieldId', 'sourceFieldName', linkJumpInfo.content, this.name2Auto)
        })
        const firstNode = this.linkJumpInfoArray[0]
        this.$nextTick(() => {
          this.$refs.linkJumpInfoTree.setCurrentKey(firstNode.sourceFieldId)
          this.nodeClick(firstNode)
        })
      })
    },
    checkShow(item) {
      const result = !(this.linkJumpInfo && this.linkJumpInfo.sourceFieldType !== 1 && item.componentType && item.componentType.indexOf('time') > -1)
      return result
    },
    handleExceed(file) {
    },
    cancel() {
      this.$emit('closeJumpSetDialog')
    },
    save() {
      this.$store.commit('canvasChange')
      this.codemirrorShow = false
      this.linkJumpInfoArray.forEach(jumpInfo => {
        jumpInfo.content = this.setNameIdTrans('sourceFieldName', 'sourceFieldId', jumpInfo.content)
      })
      updateJumpSet(this.linkJump).then(rsp => {
        this.$message({
          message: '保存成功',
          type: 'success',
          showClose: true
        })
        // 刷新跳转信息
        queryPanelJumpInfo(this.panelInfo.id).then(rsp => {
          this.$store.commit('setNowPanelJumpInfo', rsp.data)
          this.cancel()
          this.codemirrorShow = true
        }).catch(() => {
          this.codemirrorShow = true
        })
      }).catch(() => {
        this.codemirrorShow = true
      })
    },
    nodeClick(data, node) {
      this.linkJumpInfo = this.mapJumpInfoArray[data.sourceFieldId]
      console.log('nodeClick=' + JSON.stringify(this.linkJumpInfo))
      if (!this.linkJumpInfo.linkType) {
        this.linkJumpInfo.linkType = 'inner'
      }
      if (!this.linkJumpInfo.jumpType) {
        this.linkJumpInfo.jumpType = '_blank'
      }
      if (!this.linkJumpInfo.content) {
        this.linkJumpInfo.content = 'http://'
      }
      if (!this.linkJumpInfo.attachParams) {
        this.linkJumpInfo.attachParams = false
      }
      if (this.linkJumpInfo.targetPanelId) {
        this.getPanelViewList(this.linkJumpInfo.targetPanelId)
      }
      setTimeout(() => {
        this.matchToAuto()
      }, 500)
    },
    // 获取当前视图字段 关联仪表板的视图信息列表
    getPanelViewList(panelId) {
      getComponentInfo(panelId).then(rsp => {
        this.viewIdFieldArrayMap = {}
        this.currentLinkPanelViewArray = rsp.data.panelViewTables
        if (this.currentLinkPanelViewArray) {
          this.currentLinkPanelViewArray.forEach(view => {
            this.viewIdFieldArrayMap[view.id] = view.tableFields
          })
        }
        // 增加过滤组件匹配
        JSON.parse(rsp.data.bashComponentData).forEach(componentItem => {
          if (componentItem.type === 'custom' && this.widgetSubjectsFilter.includes(componentItem.serviceName)) {
            this.currentLinkPanelViewArray.push({
              id: componentItem.id,
              componentType: componentItem.serviceName,
              type: 'filter',
              name: componentItem.options.attrs.title ? componentItem.options.attrs.title : this.widgetSubjectsTrans[componentItem.serviceName]
            })
            this.viewIdFieldArrayMap[componentItem.id] = [{ id: 'empty', name: this.$t('panel.filter_no_select') }]
          }
        })
      })
    },
    panelNodeClick(data, node) {
      this.linkJumpInfo.targetViewInfoList = []
      this.addLinkJumpField()
      this.getPanelViewList(data.id)
    },
    inputVal(value) {
      if (!value) {
        this.linkJumpInfo.targetViewInfoList = []
        this.viewIdFieldArrayMap = {}
        this.currentLinkPanelViewArray = []
      }
    },
    addLinkJumpField() {
      this.linkJumpInfo.targetViewInfoList.push({
        targetViewId: '',
        targetFieldId: ''
      })
    },
    deleteLinkJumpField(index) {
      this.linkJumpInfo.targetViewInfoList.splice(index, 1)
    },
    normalizer(node) {
      // 去掉children=null的属性
      if (node.children === null || node.children === 'null') {
        delete node.children
      }
    },
    viewInfoOnChange(targetViewInfo) {
      if (this.viewIdFieldArrayMap[targetViewInfo.targetViewId] && this.viewIdFieldArrayMap[targetViewInfo.targetViewId].length === 1 && this.viewIdFieldArrayMap[targetViewInfo.targetViewId][0].id === 'empty') {
        targetViewInfo.targetFieldId = 'empty'
      } else {
        targetViewInfo.targetFieldId = null
      }
    },
    sourceFieldCheckedChange(data) {
      if (data.checked) {
        this.linkJump.checked = true
      }
      this.$nextTick(() => {
        this.$refs.linkJumpInfoTree.setCurrentKey(data.sourceFieldId)
        this.nodeClick(data)
      })
    },
    onCmReady(cm) {
      this.codemirror.setSize('-webkit-fill-available', 'auto')
    },
    onCmFocus(cm) {
    },
    onCmCodeChange(newCode) {
      // this.fieldForm.originName = newCode
    },
    insertFieldToCodeMirror(param) {
      const pos1 = this.$refs.myCm.codemirror.getCursor()
      const pos2 = {}
      pos2.line = pos1.line
      pos2.ch = pos1.ch
      this.$refs.myCm.codemirror.replaceRange(param, pos2)
      this.$refs.myCm.codemirror.markText(pos2, { line: pos2.line, ch: param.length + pos2.ch }, {
        atomic: true,
        selectRight: true
      })
    },
    matchToAuto() {
      if (!this.name2Auto.length) return
      this.name2Auto.forEach(ele => {
        const search = this.$refs.myCm.codemirror.getSearchCursor(ele, { line: 0, ch: 0 })
        if (search.find()) {
          const { from, to } = search.pos
          this.$refs.myCm.codemirror.markText({ line: from.line, ch: from.ch - 1 }, {
            line: to.line,
            ch: to.ch + 1
          }, { atomic: true, selectRight: true })
        }
      })
    },
    setNameIdTrans(from, to, originName, name2Auto) {
      if (!originName) {
        return originName
      }
      let name2Id = originName
      const nameIdMap = this.linkJumpInfoArray.reduce((pre, next) => {
        pre[next[from]] = next[to]
        return pre
      }, {})
      const on = originName.match(/\[(.+?)\]/g)
      if (on) {
        on.forEach(itm => {
          const ele = itm.slice(1, -1)
          if (name2Auto) {
            name2Auto.push(nameIdMap[itm])
          }
          name2Id = name2Id.replace(itm, '[' + nameIdMap[ele] + ']')
        })
      }
      return name2Id
    }
  }
}
</script>

<style scoped>

.my_table ::v-deep .el-table__row > td {
  /* 去除表格线 */
  border: none;
  padding: 0 0;
}

.my_table ::v-deep .el-table th.is-leaf {
  /* 去除上边框 */
  border: none;
}

.my_table ::v-deep .el-table::before {
  /* 去除下边框 */
  height: 0;
}

.root-class {
  margin: 15px 0px 5px;
  text-align: center;
}

.preview {
  margin-top: 5px;
  border: 1px solid #E6E6E6;
  height: 350px !important;
  overflow: hidden;
  background-size: 100% 100% !important;
}

.preview-show {
  border-left: 1px solid #E6E6E6;
  height: 350px;
  background-size: 100% 100% !important;
}

.top_border {
  border-top: 1px solid #E6E6E6;
}

.slot-class {
  color: white;
}

.bottom {
  margin-top: 10px;
  text-align: center;

}

.ellip {
  /*width: 100%;*/
  margin-left: 10px;
  margin-right: 10px;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis; /*超出部分文字以...显示*/
  text-align: center;
  background-color: #f7f8fa;
  color: #3d4d66;
  font-size: 12px;
  line-height: 24px;
  height: 24px;
  border-radius: 3px;
}

.select-filed {
  /*width: 100%;*/
  margin-left: 10px;
  margin-right: 10px;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis; /*超出部分文字以...显示*/
  color: #3d4d66;
  font-size: 12px;
  line-height: 35px;
  height: 35px;
  border-radius: 3px;
}

::v-deep .el-popover {
  height: 200px;
  overflow: auto;
}

.custom-position {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  flex-flow: row nowrap;
  color: #9ea6b2;
}

.tree-style {
  padding: 10px 15px;
  height: 100%;
  overflow-y: auto;
}

/deep/ .vue-treeselect__control {
  height: 28px;
}

/deep/ .vue-treeselect__single-value {
  color: #606266;
  line-height: 28px !important;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}

.auth-span {
  float: right;
  width: 30px;
  margin-right: 5px
}

.tree-head {
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid var(--TableBorderColor, #e6e6e6);
  background-color: var(--SiderBG, #f7f8fa);
  font-size: 12px;
  color: var(--TableColor, #3d4d66);
}

/deep/ .vue-treeselect__placeholder {
  line-height: 28px
}

/deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #8dbbef !important;
}

.codemirror {
  height: 190px;
  overflow-y: auto;
  font-size: 12px;
}

.codemirror ::v-deep .CodeMirror-scroll {
  height: 200px;
  overflow-y: auto;
  font-size: 12px;
}

.padding-lr {
  padding: 0 4px;
}

.field-height {
  height: calc(100% - 25px);
  margin-top: 4px;
}

.drag-list {
  height: calc(100% - 26px);
  overflow: auto;
}

.item-dimension {
  padding: 2px 10px;
  margin: 2px 2px 0 2px;
  border: solid 1px #eee;
  text-align: left;
  color: #606266;
  /*background-color: rgba(35,46,64,.05);*/
  background-color: white;
  display: block;
  word-break: break-all;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.blackTheme .item-dimension {
  border: solid 1px;
  border-color: #495865;
  color: #F2F6FC;
  background-color: var(--MainBG);
}

.item-dimension + .item-dimension {
  margin-top: 2px;
}

.item-dimension:hover {
  color: #1890ff;
  background: #e8f4ff;
  border-color: #a3d3ff;
  cursor: pointer;
}

.blackTheme .item-dimension:hover {
  /* color: var(--Main); */
  background: var(--ContentBG);
  /* cursor: pointer; */
}

.item-quota {
  padding: 2px 10px;
  margin: 2px 2px 0 2px;
  border: solid 1px #eee;
  text-align: left;
  color: #606266;
  /*background-color: rgba(35,46,64,.05);*/
  background-color: white;
  display: block;
  word-break: break-all;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.blackTheme .item-quota {

  border: solid 1px;
  border-color: #495865;
  color: #F2F6FC;
  background-color: var(--MainBG);

}

.item-quota + .item-quota {
  margin-top: 2px;
}

.item-quota:hover {
  color: #67c23a;
  background: #f0f9eb;
  border-color: #b2d3a3;
  cursor: pointer;
}

.blackTheme .item-quota:hover {
  background: var(--ContentBG);
}

span {
  font-size: 12px;
}

.field-height ::v-deep .el-divider--horizontal {
  margin: 2px 0 !important;
}

::v-deep .CodeMirror {
  height: 190px !important;
}

</style>
